import { SettingOutlined, DeleteOutlined } from '@ant-design/icons';
import { Space } from 'antd';
import React from 'react';

import { SvgIcon } from '@/components/icon';
import Tables from '@/components/tables/tables';
import { t } from '@/locales/i18n';

interface VariableTableProps {
  variables: { icon?: string; label: string; type: string; key: string; isTool?: boolean }[];
  onEdit: (key: string) => void;
  onDelete: (key: string) => void;
}

function VariableTable({ variables = [], onEdit, onDelete }: VariableTableProps) {
  const showToolColumn = variables.some((item) => item.isTool);

  const columns = [
    {
      title: t('Variable_name'),
      dataIndex: 'label',
      key: 'label',
      render: (text: string, record: any) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {record.icon && (
            <span style={{ marginRight: 4, color: '#2563EB' }}>
              <SvgIcon icon={record.icon} size="14px" />
            </span>
          )}
          {record.label || record.key}
        </div>
      ),
    },
    {
      title: t('core.workflow.Value type'),
      dataIndex: 'type',
      key: 'type',
    },
    ...(showToolColumn
      ? [
          {
            title: t('tool_input'),
            dataIndex: 'isTool',
            key: 'isTool',
            render: (isTool: boolean) => (isTool ? '✅' : '-'),
          },
        ]
      : []),
    {
      title: '',
      key: 'action',
      render: (_: any, record: any) => (
        <Space>
          <SettingOutlined
            style={{ cursor: 'pointer', fontSize: '16px' }}
            onClick={() => onEdit(record.key)}
            className="hover-primary"
          />
          <DeleteOutlined
            style={{ cursor: 'pointer', fontSize: '16px', color: 'rgba(0, 0, 0, 0.45)' }}
            onClick={() => onDelete(record.key)}
            className="delete hover-danger"
          />
        </Space>
      ),
    },
  ];

  return (
    <div
      className="variable-table-wrapper"
      style={{ background: 'white', borderRadius: '4px', border: '1px solid #f0f0f0' }}
    >
      <Tables
        columns={columns}
        dataSource={variables}
        pagination={false}
        rowKey="key"
        size="middle"
        paginationHide
      />
    </div>
  );
}

export default React.memo(VariableTable);
